import QtQuick

/* 自定义组件：带文本的按键 */
MouseArea {
    id: textBtn
    width: 50
    height: 30
    hoverEnabled: true
    clip: true

    // 可依据自身需求追加
    property string tbText: "text" // 文本
    property color tbColor: "#000000" // 文字颜色
    property int tbFontSize: 14 // 文字大小
    property color tbBackColor: "#FFFFFF" // 背景色
    property color tbHoverColor: "#616263" // 悬停过渡颜色
    property color tbBorderColor: "#888888" // 边框颜色
    property double tbBorderWidth: 0 // 边框宽度
    property int tbAnimationTime: 200 // 动画时间
    property real tbRadius: 0 // 圆角
    property real tbTextX: (textBtn.width - textBtnText.width) / 2 // 文本位置x轴偏移
    property alias tbTextHAlign: textBtnText.horizontalAlignment // 水平对齐方式
    property alias tbTextVAlign: textBtnText.verticalAlignment // 垂直对齐方式

    Rectangle {
        id: textBtnRect
        anchors.fill: parent
        color: tbBackColor
        border.color: tbBorderColor
        border.width: tbBorderWidth
        radius: tbRadius
        clip: true

        AsText {
            id: textBtnText
            x: tbTextX
            height: parent.height
            text: tbText
            font.pixelSize: tbFontSize
            color: tbColor
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
        // 设置当前状态
        state: "exit"
        // 状态对应的属性变化
        states: [
            State {
                name: "enter"
                PropertyChanges {
                    target: textBtnRect
                    color: tbHoverColor
                }
            },
            State {
                name: "exit"
                PropertyChanges {
                    target: textBtnRect
                    color: tbBackColor
                }
            }
        ]
        // 绑定各个状态的属性变化动画
        transitions: [
            Transition {
                ColorAnimation {
                    properties: "color"
                    duration: tbAnimationTime
                }
            }
        ]
    }

    onEntered: {
        textBtnRect.state = "enter"
//        console.log("entered")
    }

    onExited: {
        textBtnRect.state = "exit"
//        console.log("exited")
    }
}
